<!-- 订单管理 -->
<template>
  <div
    class="dashboard-container order-list customer-list-box"
    style="width: 100%"
  >
    <div class="app-container">
      <!-- 上面部分页面 -->
      <el-card shadow="never" class="search-card-box">
        <el-form :model="orderModel" ref="orderRef">
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="订单编号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="orderModel.id"
                  placeholder="请输入订单编号"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="订单状态:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  clearable
                  placeholder="请选择"
                  v-model="orderModel.status"
                >
                  <el-option
                    v-for="item in orderStatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <!-- <span>{{ row.status === 23000 ? "待取件" : row.status === 23001 ? "已取件" : row.status === 23002 ? "网点自寄" : row.status === 23003 ? "网点入库" : row.status === 23004 ? "待转车" : row.status === 23005 ? "运输中" : row.status === 23008? "派件中"
                  : row.status === 23009 ? "已签收" : row.status === 23010 ? "拒收" :'已取消' }}</span> -->
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="付费状态:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  clearable
                  placeholder="请选择"
                  v-model="orderModel.paymentStatus"
                >
                  <el-option label="已付" :value="1"></el-option>
                  <el-option label="未付款" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="发件人姓名:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  placeholder="请输入发件人姓名"
                  v-model="orderModel.senderName"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="发件人电话:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  placeholder="请输入发件人电话"
                  v-model="orderModel.senderPhone"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                inline
                label="发件人地址:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  placeholder="请输省"
                  style="width: 76px !important; margin-right:5px;"
                  v-model="orderModel.senderProvinceId"
                  @change="sendercitys"
                >
                  <el-option
                    v-for="item in citys"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
                <el-select
                  placeholder="请选择市"
                  style="width: 76px !important; margin-right:5px;"
                  v-model="orderModel.senderCityId"
                  @change="senderareas"
                >
                  <el-option
                    v-for="item in senderCityList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
                <el-select
                  placeholder="请输入区"
                  v-model="orderModel.senderCountyId"
                  style="width: 76px !important; margin-right:5px;"
                >
                  <el-option
                    v-for="item in senderCountyList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="收件人姓名:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  placeholder="请输入收件人姓名"
                  v-model="orderModel.receiverName"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="收件人电话:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  placeholder="请输入收件人电话"
                  v-model="orderModel.receiverPhone"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                label="收件人地址:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-select
                  placeholder="请输入省"
                  style="width: 76px !important; margin-right:5px;"
                  @change="receivercitys"
                  v-model="orderModel.receiverProvinceId"
                >
                  <el-option
                    v-for="item in citys"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
                <el-select
                  placeholder="请输入市"
                  style="width: 76px !important; margin-right:5px;"
                  @change="receiverareas"
                  v-model="orderModel.receiverCityId"
                >
                  <el-option
                    v-for="item in receiverCityList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
                <el-select
                  placeholder="请输入"
                  v-model="orderModel.receiverCountyId"
                  style="width: 76px !important; margin-right:5px;"
                >
                  <el-option
                    v-for="item in receiverCountyList"
                    :key="item.areaId"
                    :label="item.areaName"
                    :value="item.areaId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8" style="padding-left:50px">
              <el-button type="warning" @click="handleFilter">搜索</el-button>
              <el-button plain class="reset-btn" @click="resetForm"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <div style="margin-top: 20px">
        <el-card shadow="never" class="table-card-box">
          <!-- 下面表单渲染 -->
          <el-table style="width: 100%" :data="list">
            <el-table-column
              align="left"
              label="序号"
              width="60px"
              type="index"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index + (data.page - 1) * orderModel.pageSize + 1
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="订单编号"
              prop="id"
            >
              <!-- <template #default='{row}'>{{row.id}}</template> -->
            </el-table-column>

            <el-table-column
              align="left"
              label="运单编号"
              prop="transportOrder.id"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="下单时间"
              prop="createTime"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="订单状态"
              prop="status"
            >
              <template #default="{row}">
                {{
                  row.status === 23000
                    ? '待取件'
                    : row.status === 23001
                    ? '已取件'
                    : row.status === 23002
                    ? '网点自寄'
                    : row.status === 23003
                    ? '网点入库'
                    : row.status === 23004
                    ? '待转车'
                    : row.status === 23005
                    ? '运输中'
                    : row.status === 23008
                    ? '派件中'
                    : row.status === 23009
                    ? '已签收'
                    : row.status === 23010
                    ? '拒收'
                    : '已取消'
                }}
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="发件人姓名"
              prop="senderName"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="发件人电话"
              prop="senderPhone"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="发件人地址"
              prop="senderAddress"
            >
              <template #default="{ row }">
                <span
                  >{{ row.senderProvince.name }} {{ row.senderCity.name }}
                  {{ row.senderCounty.name }}</span
                >
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="收件人姓名"
              prop="receiverName"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="收件人电话"
              prop="receiverPhone"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="收件人地址"
              prop="receiverAddress"
            >
            </el-table-column>

            <el-table-column
              align="left"
              label="取件类型"
              prop="pickupType"
            >
              <template #default="{ row }">
                <span>{{
                  row.pickupType === 1 ? '网点自寄' : '上门取件'
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="付费类型"
              prop="paymentMethod"
            >
            <template #default="{ row }">
                <span>{{
                  row.paymentMethod === 1 ? '预结' : '到付'
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="left"
              label="付费状态"
              prop="paymentStatus"
            >
            <template #default="{ row }">
                <span>{{
                  row.paymentStatus === 1 ? '未付' : '已付'
                }}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="85"
              class-name="small-padding fixed-width"
            >
            <template #default='{row}'>
        <el-button @click="$router.push(`edit-order?id=${row.id}`)" type="text" >查看详情</el-button>
      </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div
            class="pagination"
          >
            <div class="pages">
              <el-pagination
                :current-page="orderModel.page"
                :total="total"
                :page-size="orderModel.pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import {
  orderList,
  orderDetail,
  updateOrder,
  getOrderTrackApi
} from '@/api/order'
import { areaList } from '@/api/common'
import location from '@/api/city.json'
export default {
  name: 'order',
  data() {
    return {
      list: [],
      // 订单状态
      // 省份数据
      citys: [],
      //发件人城市数据
      senderCityList: [],
      //发件人县/区数据
      senderCountyList: [],
      //收件人城市数据
      receiverCityList: [],
      // 收件人县/区数据
      receiverCountyList: [],

      orderStatus: [
        {
          id: 23000,
          name: '待取件'
        },
        {
          id: 23001,
          name: '已取件'
        },
        {
          id: 23005,
          name: '运输中'
        },
        {
          id: 23008,
          name: '派送中'
        },
        {
          id: 23009,
          name: '已签收'
        },
        {
          id: 23010,
          name: '拒收'
        },
        {
          id: 230011,
          name: '已取消'
        },
        {
          id: 0,
          name: '全部'
        }
      ],
      orderModel: {
        createTime: '', //时间
        orderType: '', //订单类型
        paymentMethod: '',
        paymentStatus: '',
        pickupType: '',
        receiverAddress: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderAddress: '',
        senderCityId: '',
        senderCountyId: '',
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        status: '',
        id: '',
        orderId: '', // 订单id
        page: 1,
        pageSize: 10
      },
      // 分页数据
      data: {
        page: 1,
        pageSize: 10
      },
      // 总条数
      total: 0
 
      // areaList:{}
    }
  },
  created() {
    this.orderList()
    this.citys = location
  },
  methods: {
    // 渲染列表
    async orderList() {
        const res = await orderList(this.orderModel)
        console.log(res);
        this.list = res.data.items
        // console.log(this.list)
        this.total = Number(res.data.counts)

      // console.log(this.total);
    },
    pafeChange(page) {
      this.data.page = page
      this.orderList()
    },


    // 重置
    resetForm() {
      this.orderModel = {
        page: 1,
        pageSize: 10,
        createTime: '', //时间
        orderType: '', //订单类型
        paymentMethod: '',
        paymentStatus: '',
        pickupType: '',
        receiverAddress: '',
        receiverCityId: '',
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderAddress: '',
        senderCityId: '',
        senderCountyId: '',
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        status: '',
        id: ''
      }
      this.orderList()
      // console.log(this.orderModel);
    },

    // 搜索信息
    handleFilter() {
      this.orderList(this.orderModel)
      console.log(this.orderModel)
    },
    // 发件人城市数据
    sendercitys() {
      this.senderCityList = this.citys.filter(
        item => item.areaId === this.orderModel.senderProvinceId
      )[0].cities
      console.log(this.senderCityList)
      this.orderModel.senderCityId = ''
      this.orderModel.senderCountyId = ''
    },
    // 发件人县/区数据
    senderareas() {
      this.senderCountyList = this.senderCityList.filter(
        item => item.areaId === this.orderModel.senderCityId
      )[0].counties
      this.orderModel.senderCountyId = ''
    },
    // 收件人城市数据
    receivercitys() {
      this.receiverCityList = this.citys.filter(
        item => item.areaId === this.orderModel.receiverProvinceId
      )[0].cities
      console.log(this.receiverCityList)
      this.orderModel.receiverCityId = ''
      this.orderModel.receiverCountyId = ''
    },
    // 收件人县/区数据
    receiverareas() {
      this.receiverCountyList = this.receiverCityList.filter(
        item => item.areaId === this.orderModel.receiverCityId
      )[0].counties
      this.orderModel.receiverCountyId = ''
    },

    // 跳转详情页
    ckxq(row) {
      this.$router.push(`edit-order/${row.id}`)
    },
    // 每页显示信息条数
     handleSizeChange(val) {
      this.orderModel.pageSize = val
      if (this.orderModel.page === 1) {
        this.orderList()
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.orderModel.page = val
      this.orderList()
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
